

var SlideShow = new Class({

    getOptions: function(){
        return {
            effect: 'fade', //fade|wipe|slide|random
            duration: 2000,
            transition: Fx.Transitions.linear,
            direction: 'right', //top|right|bottom|left|random
            color: false,
            wait: 5000,
            loop: false,
            thumbnails: false,
            thumbnailCls: 'outline',
            backgroundSlider: false,
            loadingCls: 'loading',
            onClick: false
        };
    },

    initialize: function(container, images, options){
        this.setOptions(this.getOptions(), options);

        this.container = $(container);
        this.container.setStyles({
            position: 'relative',
            overflow: 'hidden'
        });
        if(this.options.onClick){
            this.container.addEvent('click', function(){
                this.options.onClick(this.imageLoaded);
            }.bind(this));
        }


        this.imagesHolder = new Element('div').setStyles({
            position: 'absolute',
            overflow: 'hidden',
            top: this.container.getStyle('height'),
            left: 0,
            width: '0px',
            height: '0px',
            display: 'none'
        }).injectInside(this.container);

        if($type(images) == 'string' && !this.options.thumbnails){
            var imageList = [];
            $$('.'+images).each(function(el){
                imageList.push(el.src);
                el.injectInside(this.imagesHolder);
            },this);
            this.images = imageList;

        }else if($type(images) == 'string' && this.options.thumbnails){
            var imageList = [];
            var srcList = [];
            this.thumbnails = $$('.'+images);
            this.thumbnails.each(function(el,i){
                srcList.push(el.href);
                imageList.push(el.getElement('img'));
                el.href = 'javascript:;';
                el.addEvent('click',function(){
                    this.stop();
                    this.play(i);
                }.bind(this,el,i));
            },this);
            this.images = srcList;
            this.thumbnailImages = imageList;

            if(this.options.backgroundSlider){
                this.bgSlider = new BackgroundSlider(this.thumbnailImages,{
                    mouseOver: false,
                    duration: this.options.duration,
                    className: this.options.thumbnailCls,
                    padding:{
                        top:0,
                        right:-2,
                        bottom:-2,
                        left:0
                    }
                });
            this.bgSlider.set(this.thumbnailImages[0]);
        }

    }else{
        this.images = images;
    }

    this.loading = new Element('div').addClass(this.options.loadingCls).setStyles({
        position: 'absolute',
        top: 0,
        left: 0,
        zIndex: 3,
        display: 'none',
        width: this.container.getStyle('width'),
        height: this.container.getStyle('height')
    }).injectInside(this.container);

    this.oldImage = new Element('div').setStyles({
        position: 'absolute',
        overflow: 'hidden',
        top: 0,
        left: 0,
        opacity: 0,
        width: this.container.getStyle('width'),
        height: this.container.getStyle('height')
    }).injectInside(this.container);

    this.newImage = this.oldImage.clone();
    this.newImage.injectInside(this.container);



    this.timer = 0;
    this.image = -1;
    this.imageLoaded = 0;
    this.stopped = true;
    this.started = false;
    this.animating = false;
},

load: function(){
    $clear(this.timer);
    this.loading.setStyle('display','block');
    this.image++;
    var img = this.images[this.image];
    delete this.imageObj;

    doLoad = true;
    this.imagesHolder.getElements('img').each(function(el){
        var src = this.images[this.image];
        if(el.src == src){
            this.imageObj = el;
            doLoad = false;
            this.add = false;
            this.show();
        }
    },this);

    if(doLoad){
        this.add = true;
        this.imageObj = new Asset.image(img, {
            onload: this.show.bind(this)
            });
    }

},

show: function(add){

    if(this.add){
        this.imageObj.injectInside(this.imagesHolder);
    }

    this.newImage.setStyles({
        zIndex: 1,
        opacity: 0
    });
    var img = this.newImage.getElement('img');
    if(img){
        img.replaceWith(this.imageObj.clone());
    }else{
        var obj = this.imageObj.clone();
        obj.injectInside(this.newImage);
    }
    this.imageLoaded = this.image;
    this.loading.setStyle('display','none');
    if(this.options.thumbnails){

        if(this.options.backgroundSlider){
            var elT = this.thumbnailImages[this.image];
            this.bgSlider.move(elT);
            this.bgSlider.setStart(elT);
        }else{
            this.thumbnails.each(function(el,i){
                el.removeClass(this.options.thumbnailCls);
                if(i == this.image){
                    el.addClass(this.options.thumbnailCls);
                }
            },this);
        }
    }
    this.effect();
},

wait: function(){
    this.timer = this.load.delay(this.options.wait,this);
},

play: function(num){
    if(this.stopped){
        if(num > -1){
            this.image = num-1
            };
        if(this.image < this.images.length){
            this.stopped = false;
            if(this.started){
                this.next();
            }else{
                this.load();
            }
            this.started = true;
        }
    }
},

stop: function(){
    $clear(this.timer);
    this.stopped = true;
},

next: function(wait){
    var doNext = true;
    if(wait && this.stopped){
        doNext = false;
    }
    if(this.animating){
        doNext = false;
    }
    if(doNext){
        this.cloneImage();
        $clear(this.timer);
        if(this.image < this.images.length-1){
            if(wait){
                this.wait();
            }else{
                this.load();
            }
        }else{
            if(this.options.loop){
                this.image = -1;
                if(wait){
                    this.wait();
                }else{
                    this.load();
                }
            }else{
                this.stopped = true;
            }
        }
    }
},

previous: function(){
    if(this.imageLoaded == 0){
        this.image = this.images.length-2;
    }else{
        this.image = this.imageLoaded-2;
    }
    this.next();
},

cloneImage: function(){
    var img = this.oldImage.getElement('img');
    if(img){
        img.replaceWith(this.imageObj.clone());
    }else{
        var obj = this.imageObj.clone();
        obj.injectInside(this.oldImage);
    }

    this.oldImage.setStyles({
        zIndex: 0,
        top: 0,
        left: 0,
        opacity: 1
    });

    this.newImage.setStyles({
        opacity:0
    });
},


effect: function(){
    this.animating = true;
    this.effectObj = this.newImage.effects({
        duration: this.options.duration,
        transition: this.options.transition
    });

    var myFxTypes = ['fade','wipe','slide'];
    var myFxDir = ['top','right','bottom','left'];

    if(this.options.effect == 'fade'){
        this.fade();

    }else if(this.options.effect == 'wipe'){
        if(this.options.direction == 'random'){
            this.setup(myFxDir[Math.floor(Math.random()*(3+1))]);
        }else{
            this.setup(this.options.direction);
        }
        this.wipe();

    }else if(this.options.effect == 'slide'){
        if(this.options.direction == 'random'){
            this.setup(myFxDir[Math.floor(Math.random()*(3+1))]);
        }else{
            this.setup(this.options.direction);
        }
        this.slide();

    }else if(this.options.effect == 'random'){
        var type = myFxTypes[Math.floor(Math.random()*(2+1))];
        if(type != 'fade'){
            var dir = myFxDir[Math.floor(Math.random()*(3+1))];
            if(this.options.direction == 'random'){
                this.setup(dir);
            }else{
                this.setup(this.options.direction);
            }
        }else{
            this.setup();
        }
        this[type]();
    }
},

setup: function(dir){
    if(dir == 'top'){
        this.top = -this.container.getStyle('height').toInt();
        this.left = 0;
        this.topOut = this.container.getStyle('height').toInt();
        this.leftOut = 0;

    }else if(dir == 'right'){
        this.top = 0;
        this.left = this.container.getStyle('width').toInt();
        this.topOut = 0;
        this.leftOut = -this.container.getStyle('width').toInt();

    }else if(dir == 'bottom'){
        this.top = this.container.getStyle('height').toInt();
        this.left = 0;
        this.topOut = -this.container.getStyle('height').toInt();
        this.leftOut = 0;

    }else if(dir == 'left'){
        this.top = 0;
        this.left = -this.container.getStyle('width').toInt();
        this.topOut = 0;
        this.leftOut = this.container.getStyle('width').toInt();

    }else{
        this.top = 0;
        this.left = 0;
        this.topOut = 0;
        this.leftOut = 0;
    }
},

fade: function(){
    this.effectObj.start({
        opacity: [0,1]
    });
    this.resetAnimation.delay(this.options.duration+90,this);
    if(!this.stopped){
        this.next.delay(this.options.duration+100,this,true);
    }
},

wipe: function(){
    this.oldImage.effects({
        duration: this.options.duration,
        transition: this.options.transition
    }).start({
        top: [0,this.topOut],
        left: [0, this.leftOut]
    })
    this.effectObj.start({
        top: [this.top,0],
        left: [this.left,0],
        opacity: [1,1]
    },this);
    this.resetAnimation.delay(this.options.duration+90,this);
    if(!this.stopped){
        this.next.delay(this.options.duration+100,this,true);
    }
},

slide: function(){
    this.effectObj.start({
        top: [this.top,0],
        left: [this.left,0],
        opacity: [1,1]
    },this);
    this.resetAnimation.delay(this.options.duration+90,this);
    if(!this.stopped){
        this.next.delay(this.options.duration+100,this,true);
    }
},

resetAnimation: function(){
    this.animating = false;
}

});
SlideShow.implement(new Options);
SlideShow.implement(new Events);


/*************************************************************/

